<template>
  <div class="square">
    <div class="square-inner grid">
      <!-- 城市之声 -->
      <!-- {{props.menuitem == 'chengshizhisheng'}} -->
      <div class="square-items">
        12345
        <div class="square-item">
          <div class="items-title">
            今日
            <div class="items-number">48起</div>
          </div>
          <div class="items-title">
            本周
            <div class="items-number">257起</div>
          </div>
        </div>
      </div>
      <div class="square-items">
        119报警总数
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">3起</span>
        </div>
      </div>
      <div class="square-items">
        119火警类
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">0起</span>
        </div>
      </div>
      <div class="square-items">
        119抢险救援
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">2起</span>
        </div>
      </div>
      <div class="square-items">
        119社会救助
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">1起</span>
        </div>
      </div>
      <div class="square-items">
        110报警总数
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">469起</span>
        </div>
      </div>
      <div class="square-items">
        110报警类
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">80起</span>
        </div>
      </div>
      <div class="square-items">
        110侵权
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">29起</span>
        </div>
      </div>
      <div class="square-items">
        110纠纷
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">21起</span>
        </div>
      </div>
      <div class="square-items">
        110侵财
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">19起</span>
        </div>
      </div>
      <div class="square-items">
        110其他
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">11起</span>
        </div>
      </div>
      <div class="square-items">
        110非报警类
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">389起</span>
        </div>
      </div>
      <div class="square-items">
        110诈骗
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">84起</span>
        </div>
      </div>
      <div class="square-items">
        110交通事故
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">168起</span>
        </div>
      </div>
      <div class="square-items">
        110其他
        <div style="margin-top: 10px;" class="items-title">
          今日
          <span class="items-number">65起</span>
        </div>
      </div>
      <div class="square-items">
        应急突发事件
        <div class="square-item">
          <div class="items-title">
            今日
            <div class="items-number">12起</div>
          </div>
          <div class="items-title">
            本周
            <div class="items-number">68起</div>
          </div>
        </div>
      </div>

      <!-- 城市之感 -->
      <!-- <div class="square-items">智能门闸 <div class="square-item"><div class="items-title">安装<div class="items-number">196个</div></div> <div class="items-title">告警<div class="items-number">257个</div></div></div></div>
    <div class="square-items">门禁设备 <div class="square-item"><div class="items-title">安装<div class="items-number">4010个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">有线摄像机 <div class="square-item"><div class="items-title">安装<div class="items-number">421个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">执法电瓶车 <div class="square-item"><div class="items-title">安装<div class="items-number">158个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">GPS单兵仪 <div class="square-item"><div class="items-title">安装<div class="items-number">50个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">垃圾称重传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">1个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">便民服务仪 <div class="square-item"><div class="items-title">安装<div class="items-number">91个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">火灾烟雾探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">38941个</div></div> <div class="items-title">告警<div class="items-number">121个</div></div></div></div>
    <div class="square-items">水质（溶解氧）传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">51个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">人脸门禁机 <div class="square-item"><div class="items-title">安装<div class="items-number">12个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">水质（PH）传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">21个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">温湿度传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">2个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">倾角传感器(gsm版) <div class="square-item"><div class="items-title">安装<div class="items-number">90个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">车辆地磁探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">2895个</div></div> <div class="items-title">告警<div class="items-number">208个</div></div></div></div>
    <div class="square-items">温度检测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">5个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">电梯加速度探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">353个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">电弧灭弧探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">1259个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">手动火灾报警按钮 <div class="square-item"><div class="items-title">安装<div class="items-number">18067个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">水浸探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">344个</div></div> <div class="items-title">告警<div class="items-number">17个</div></div></div></div>
    <div class="square-items">震动探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">36个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">门体状态探测传感器(gsm版) <div class="square-item"><div class="items-title">安装<div class="items-number">218个</div></div> <div class="items-title">告警<div class="items-number">2个</div></div></div></div>
    <div class="square-items">电梯门体状态探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">69个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">人体活动探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">3120个</div></div> <div class="items-title">告警<div class="items-number">2个</div></div></div></div>
    <div class="square-items">无线智能摄像机 <div class="square-item"><div class="items-title">安装<div class="items-number">159个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">床垫传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">1个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">睡眠仪 <div class="square-item"><div class="items-title">安装<div class="items-number">423个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">门体状态探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">13999个</div></div> <div class="items-title">告警<div class="items-number">1336个</div></div></div></div>
    <div class="square-items">可燃气体探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">2745个</div></div> <div class="items-title">告警<div class="items-number">13个</div></div></div></div>
    <div class="square-items">红外对射传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">339个</div></div> <div class="items-title">告警<div class="items-number">3个</div></div></div></div>
    <div class="square-items">倾角传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">246个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">血压计 <div class="square-item"><div class="items-title">安装<div class="items-number">219个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">垃圾满溢探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">6347个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">执法记录仪 <div class="square-item"><div class="items-title">安装<div class="items-number">78个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">微信开门 <div class="square-item"><div class="items-title">安装<div class="items-number">681个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">垃圾车GPS <div class="square-item"><div class="items-title">安装<div class="items-number">13个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">井盖监控传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">607个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">普通监控摄像机 <div class="square-item"><div class="items-title">安装<div class="items-number">889个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
    <div class="square-items">人脸识别摄像机 <div class="square-item"><div class="items-title">安装<div class="items-number">27个</div></div> <div class="items-title">告警<div class="items-number">0个</div></div></div></div>
      <div class="square-items">室内水压探测传感器 <div class="square-item"><div class="items-title">安装<div class="items-number">1128个</div></div> <div class="items-title">告警<div class="items-number">60个</div></div></div></div>-->

      <!-- 城市之眼 -->
      <!-- <div class="square-items">公安 <div style="margin-top: 10px;" class="items-title">安装 <span class="items-number">5850台</span></div></div>
    <div class="square-items">智能安防 <div style="margin-top: 10px;" class="items-title">安装 <span class="items-number">8720台</span></div></div>
    <div class="square-items">城运 <div style="margin-top: 10px;" class="items-title">安装 <span class="items-number">1506台</span></div></div>
    <div class="square-items">鹰眼 <div style="margin-top: 10px;" class="items-title">安装 <span class="items-number">6台</span></div></div>
    <div class="square-items">高空摄像头 <div style="margin-top: 10px;" class="items-title">安装 <span class="items-number">28台</span></div></div>
      <div class="square-items">AR高空摄像头 <div style="margin-top: 10px;" class="items-title">安装 <span class="items-number">6台</span></div></div>-->

      <!-- 城市呼吸 -->
      <!-- <div class="square-items">空气质量指数 <div style="margin-top: 10px;" class="items-title"><span class="items-number">46</span></div></div>
    <div class="square-items">PM2.5 <div style="margin-top: 10px;" class="items-title"><span class="items-number">11</span></div></div>
    <div class="square-items">PM10 <div style="margin-top: 10px;" class="items-title"><span class="items-number">26</span></div></div>
    <div class="square-items">区域降尘指数 <div style="margin-top: 10px;" class="items-title"><span class="items-number">4.09吨/平方公里</span></div></div>
    <div class="square-items">干垃圾末端处理 <div style="margin-top: 10px;" class="items-title"><span class="items-number">739.6吨</span></div></div>
    <div class="square-items">湿垃圾末端处理 <div style="margin-top: 10px;" class="items-title"><span class="items-number">312.1吨</span></div></div>
    <div class="square-items">可回收物收集 <div style="margin-top: 10px;" class="items-title"><span class="items-number">189.4吨</span></div></div>
    <div class="square-items">有害垃圾收集 <div style="margin-top: 10px;" class="items-title"><span class="items-number">0.22吨</span></div></div>
    <div class="square-items">温度 <div style="margin-top: 10px;" class="items-title"><span class="items-number">16~23℃</span></div></div>
    <div class="square-items">天气情况 <div style="margin-top: 10px;" class="items-title"><span class="items-number">多云</span></div></div>
    <div class="square-items">暴雨情况 <div style="margin-top: 10px;" class="items-title"><span class="items-number">正常</span></div></div>
    <div class="square-items">台风情况 <div style="margin-top: 10px;" class="items-title"><span class="items-number">正常</span></div></div>
    <div class="square-items">高潮情况 <div style="margin-top: 10px;" class="items-title"><span class="items-number">正常</span></div></div>
      <div class="square-items">洪水情况 <div style="margin-top: 10px;" class="items-title"><span class="items-number">正常</span></div></div>-->

      <!-- 城市温度 -->
      <!-- <div class="square-items">鸡蛋价格 <div style="margin-top: 10px;" class="items-title"><span class="items-number">4.56元/500g</span></div></div>
    <div class="square-items">猪肉价格 <div style="margin-top: 10px;" class="items-title"><span class="items-number">26,78元/500g</span></div></div>
    <div class="square-items">蔬菜价格 <div style="margin-top: 10px;" class="items-title"><span class="items-number">4.84元/500g</span></div></div>
    <div class="square-items">水果价格 <div style="margin-top: 10px;" class="items-title"><span class="items-number">4.48元/500g</span></div></div>
    <div class="square-items">水产品价格 <div style="margin-top: 10px;" class="items-title"><span class="items-number">20.92元/500g</span></div></div>
    <div class="square-items">一网通办-接待总数 <div style="margin-top: 10px;" class="items-title"><span class="items-number">602人</span></div></div>
      <div class="square-items">一网通办-办理总数 <div style="margin-top: 10px;" class="items-title"><span class="items-number">603件</span></div></div>-->

      <!-- 城市脉搏 -->
      <!-- <div class="square-items">地面拥堵指数   <div style="margin-top: 10px;" class="items-title"><span class="items-number">38.2</span></div></div>
    <div class="square-items">快速道路最拥堵路段 <div style="margin-top: 10px;" class="items-title"><span class="items-number">北翟路上匝道至曹安路下匝道 拥堵里程：5.9km 时速：15.0~23.3km/h</span></div></div>
    <div class="square-items">地面道路最拥堵路段 <div style="margin-top: 10px;" class="items-title"><span class="items-number">兰溪路至武宁路 拥堵里程：0.9km 时速：7.0~7.3km/h</span></div></div>
    <div class="square-items">剩余泊位占比 <div style="margin-top: 10px;" class="items-title"><span class="items-number">33.70%</span></div></div>
    <div class="square-items">道路停车剩余数 <div style="margin-top: 10px;" class="items-title"><span class="items-number">16174个</span></div></div>
    <div class="square-items">场库停车剩余数 <div style="margin-top: 10px;" class="items-title"><span class="items-number">1852个</span></div></div>
    <div class="square-items">轨交客流 <div style="margin-top: 10px;" class="items-title"><span class="items-number">进站：20万人/出站17.3万人</span></div></div>
    <div class="square-items">轨交进出站客流TOP1 <div style="margin-top: 10px;" class="items-title"><span class="items-number">大渡河路</span></div></div>
    <div class="square-items">轨交站内换乘客流TOP1 <div style="margin-top: 10px;" class="items-title"><span class="items-number">曹杨路</span></div></div>
    <div class="square-items">105路公交当前客流 <div style="margin-top: 10px;" class="items-title"><span class="items-number">172人</span></div></div>
    <div class="square-items">单车在线车辆 <div style="margin-top: 10px;" class="items-title"><span class="items-number">2.9万辆</span></div></div>
      <div class="square-items">区内低活跃度单车数量 <div style="margin-top: 10px;" class="items-title"><span class="items-number">1.1万辆</span></div></div>-->
    </div>
  </div>
</template>
<script lang="ts">
import { ref, watch } from 'vue'
import '../font/bebas/bebas.css'
export default {
  props: {
    menuitem: String
  },
  setup(props) {
    let menuitem = ref(props.menuitem)

    watch(props, (newValue) => {
      menuitem.value = newValue.value;
    })
  }
}
</script>
<style lang="less" scoped>
.square {
  height: 480px;
  overflow: hidden;
  overflow-y: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
  grid-template-rows: repeat(3, 1fr); /* fr单位可以将容器分为几等份 */
  grid-gap: 1%; /* grid-column-gap 和 grid-row-gap的简写 */
  grid-auto-flow: row;
}
.grid > div {
  color: #fff;
  font-size: 18px;
  // line-height: 2;
  text-align: center;
  // background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
}
.square-items {
  text-align: center;
  border-bottom: 1px solid rgba(7, 48, 74, 0.47);
  border-left: 1px solid rgba(7, 48, 74, 0.47);
  padding: 10px;
}
.square-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.items-title {
  color: #c6e2fe;
}
.items-number {
  color: #10f7ff;
  font-family: "bebas";
}
</style>